<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="3"><div class="text"><div class="yangshi">教师端</div></div></el-menu-item>
      <el-menu-item index="3"></el-menu-item>
      <el-menu-item index="3"></el-menu-item>
      <el-menu-item index="3"></el-menu-item>
      <el-menu-item index="1"><router-link to="/teacher_repair/teacher"><div class="text"><div class="yangshi">处理中心</div></div></router-link></el-menu-item>
      <el-submenu index="2">
        <template slot="title"><div class="text"><div class="yangshi">我的工作台</div></div></template>
        <el-menu-item index="2-1" v-on:click="listTeacherRepair"><div class="text1">查看教师报修信息</div></el-menu-item>
      </el-submenu>
      <el-menu-item index="3"><router-link to="/teacher_repair/start_reach"><div class="text"><div class="yangshi">发起签到</div></div></router-link></el-menu-item>
      <el-menu-item v-on:click="reachTeacherHistory"><div class="text"><div class="yangshi">查看签到信息</div></div></el-menu-item>
      <el-menu-item><i class="el-icon-user-solid" id="user"></i>
        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;" id="userButton">
          个人中心
        </el-button>

        <el-button  type="primary" style="margin-left: 16px;" id="exitButton" v-on:click="exitButton">
          退出登录
        </el-button>

        <el-drawer
            title="个人中心"
            :visible.sync="drawer"
            :with-header="false">
          <span>教师姓名:{{name}}</span><br>
          <span>教师编号:{{teacherId}}</span><br>
          <span>教师用户名:{{username}}</span>
        </el-drawer>
      </el-menu-item>

    </el-menu>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeacherRepair",
  created() {
      this.$ajax.get(base_url + "teacher/get_teacher_info",{
        params:{
          username : this.$route.query.username
        }
      }).then(response => {
        this.username = response.data.data.username
        this.name = response.data.data.name
        this.teacherId = response.data.data.teacherId
      })
  },
  data() {
    return {
      drawer: false,
      activeIndex: '1',
      activeIndex2: '1',
      username : "",
      name : "",
      teacherId : ""
    };
  },
  methods: {

    exitButton(){
      this.$router.push("/")
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    listTeacherRepair(){
      this.$router.push({
        path : "/teacher_repair/teacher_repair_info",
        query : {
          teacherId : this.teacherId
        }
      })
    },
    reachTeacherHistory(){
      this.$router.push({
        path : "/teacher_repair/teacher_reach_history",
        query : {
          name : this.name
        }
      })
    }
  }
}
</script>

<style scoped>
#user{
  size: 100px;
  right: 10px;
}

.text .yangshi:hover{
  background-color: royalblue;
  color: azure;

}
.text{
  /*background-color: orangered;*/
  /*width: 100px;*/
  /*height: 50px;*/
  /*line-height: 60px;*/
  /*margin:  10px auto;*/
  margin: 10px 10px;
  height: 30px;
  line-height: 35px;

}
.text .yangshi{
  color: royalblue;
  padding: 0px 5px;
  font-weight: bold;
  height: 30px;
  display: inline-block;
  border-radius: 15px;

}
.text1{
  font-weight: bold;
}

span{
  font-size: 20px;
  font-weight: bold;
}

#userButton{
  position: absolute;
  top: 19%;
  left: 300%;
}

#exitButton{
  position: absolute;
  top: 19%;
  left: 600%;
  background: lightslategray;
}
</style>